<script setup lang="ts">
import { reactive, onBeforeMount } from 'vue'
import { settingsPrivacy, SettingsPrivacyResp } from '@/api/system/settings'
import * as dayjs from 'dayjs'

const state = reactive({
    data: {} as SettingsPrivacyResp
})

const getSettingsPrivacy = async (version?: string) => {
    const { data } = await settingsPrivacy({ version: version })
    state.data = data
}

const formatDate = (s?: string) => {
    return dayjs(s).format('gggg-MM-DD')
}

onBeforeMount(() => {
    getSettingsPrivacy()
})
</script>

<template>
    <div class="page-privacy">
        <div class="header">
            <div class="title">个人隐私政策</div>
            <div class="version">
                <a-row>
                    <a-col :span="12" class="line"><span>当前版本:</span> {{ state.data.version }}</a-col>
                </a-row>
                <a-row>
                    <a-col :span="12" class="line"><span>生效日期:</span> {{ formatDate(state.data.pubTime) }}</a-col>
                    <a-col :span="12" class="history">
                        <a-dropdown position="br">
                            <a-button type="outline"><span class="dropdown">历史版本</span><icon-down /></a-button>
                            <template #content>
                                <a-doption
                                    v-for="(item, idx) in state.data.history"
                                    :key="idx"
                                    @click="getSettingsPrivacy(item)"
                                >
                                    {{ item }}
                                </a-doption>
                            </template>
                        </a-dropdown>
                    </a-col>
                </a-row>
            </div>
        </div>
        <a-scrollbar style="height: calc(100vh - 168px); overflow-y: auto; background-color: #fff">
            <div class="content">{{ state.data.content }}</div>
        </a-scrollbar>
    </div>
</template>

<style scoped lang="less">
.arco-dropdown-open .arco-icon-down {
    transform: rotate(180deg);
}

.page-privacy {
    .header {
        height: 168px;
        overflow: hidden;
        background-color: var(--color-fill-2);

        .title {
            font-size: 20px;
            font-weight: 500;
            padding: 20px 0;
            text-align: center;
        }

        .version {
            padding: 20px;
            border-bottom: 1px solid var(--color-neutral-3);

            .line {
                line-height: 32px;
                font-size: 16px;

                span {
                    font-weight: 500;
                }
            }

            .history {
                display: flex;
                justify-content: end;

                .dropdown {
                    margin-right: 5px;
                }
            }
        }
    }

    .content {
        padding: 20px;
        line-height: 1.5;
        font-size: 14px;
    }
}
</style>
